<template>
  <view class="my-page">
    <!-- 用户信息模块 -->
    <view class="user-info">
      <!-- 用户头像 -->
      <image class="avatar"
        src="https://sdwj.oss-cn-hangzhou.aliyuncs.com/tmp_0db31efdb438b598bf83ef7999fa0c0600b77cdc7420f2e5.jpg"
        mode="aspectFill" v-text="''" />
      <!-- 用户昵称 -->
      <text class="nickname">{{ nickname }}</text>
    </view>
    <!-- 名人名言模块 -->
    <quoteComponent />
    <!-- 功能入口列表 -->
    <view class="function-list">
      <view class="function-item" v-for="(item, index) in functions" :key="index" @click="navigateTo(item.url)">
        <text :class="item.styleClass">{{ item.name }}</text>
      </view>
      <view class="function-item" @click="logout">
        <text class="function-name-special">退出登录</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import quoteComponent from '@/components/quoteComponent.vue';
// 用户信息模块
const nickname = ref('观测');
// 功能入口列表
interface FunctionItem {
  name: string;
  url: string;
  styleClass: string;
}

const functions = ref<FunctionItem[]>([
  { name: '应用设置', url: '/pages/my/settings/index', styleClass: 'function-name-default' },
  { name: '更新日志', url: '/pages/my/updatelog/index', styleClass: 'function-name-default' },
  // { name: '反馈建议', url: '/pages/my/feedback/index', styleClass: 'function-name-default' },
  { name: '关于作者', url: '/pages/my/about/index', styleClass: 'function-name-default' },
]);

const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};

// 退出登录
const logout = () => {
  uni.removeStorageSync("token");
  uni.showToast({
    title: '正在退出',
    duration: 2000,
  });
  setTimeout(() => {
    // 跳转到首页或其他页面
    uni.redirectTo({
      url: '/pages/login/index',
    });
  }, 2500);
  console.log("点击退出登录")
}
</script>

<style scoped>
.my-page {
  padding: 2vh 20px;
  background-color: #f9f9f9;
  height: 96vh;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.time {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
}



.function-list {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
}

.function-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.function-item:last-child {
  border-bottom: none;
}

.function-name-default {
  font-size: 16px;
  color: #333;
}

.function-name-special {
  font-size: 16px;
  color: #ff0000;
}
</style>